<script setup>
	import {
		onPullDownRefresh,
	} from "@dcloudio/uni-app";
	import {
		ref
	} from 'vue'
	import {
		getRandomNumber
	} from '../../utils/random';

	const colorList = ['#007aff', '#4cd964', '#f0ad4e', '#dd524d', '#861f79']
	const list = ref()

	function getList() {
		const gap = 5
		const dataList = []
		for (var i = 0; i < 10; i++) {
			const obj = {
				value1: getRandomNumber(),
				value2: (Math.random() * 10000).toFixed(2),
				bgColor: colorList[i % gap],
			}
			if (i === 0) obj.value3 = i === 0 ? '主卡' : ''
			dataList.push(obj)
		}
		// console.log(dataList);
		list.value = dataList
	}
	getList()
	onPullDownRefresh(() => {
		uni.stopPullDownRefresh()
		getList()
	})

	function onAddRemark(item, index) {
		uni.showModal({
			title: '添加备注',
			content: `给卡号${item.value1}添加备注`,
			showCancel: false
		})
	}
	function addCard(len) {
		const gap = 5
		const obj = {
			value1: getRandomNumber(),
			value2: (Math.random() * 10000).toFixed(2),
			bgColor: colorList[list.value.length % gap],
		}
		list.value.push(obj)
	}
</script>

<template>
	<view class="zg__page">
		<!-- 标题 -->
		<view class="zg__title">
			<view class="zg__title--icon"></view>
			<text class="zg__title--text">点击卡片可换卡登录</text>
		</view>
		<!-- 列表 -->
		<view class="zg__list">
			<view class="zg__listItem" :style="{ 'background-color': v.bgColor }" v-for="(v,i) in list" :key="i">
				<view class="zg__listItem--row1">
					<view class="zg__listItem--text">
						<text class="">充值号：{{ v.value1 }}</text>
					</view>
				</view>
				<view class="zg__listItem--row2">
					<view class="zg__listItem--text">
						<text class="">余额：{{ v.value2 }}</text>
					</view>
				</view>
				<view class="zg__listItem--row3">
					<view class="zg__listItem--text">
						<text class="">备注：{{ v.value3 }}</text>
					</view>
					<view class="zg__listItem--button" @click="onAddRemark(v,i)">添加备注</view>
				</view>
			</view>
		</view>
		<!-- 添加按钮 -->
		<view class="zg__addButton" @click="addCard">
			<uni-icons class="zg__addButton--icon" type="plus" size="42rpx"></uni-icons>
			<text class="zg__addButton--text">添加卡片</text>
		</view>
		<view class="zg__footer">

		</view>
	</view>
</template>

<style lang="scss" scoped>
	.zg__page {
		padding: 0 30rpx;
	}

	.zg__title {
		display: flex;
		align-items: center;
		gap: 20rpx;
		padding: 20rpx 0;

		&--icon {
			width: 6rpx;
			height: 32rpx;
			background-color: $uni-color-primary;
		}

		&--text {
			font-size: 30rpx;
			color: $uni-color-subtitle;
		}
	}

	.zg__list {
		display: flex;
		flex-direction: column;
		gap: 10rpx;

		&Item {
			width: 100%;
			height: calc(460 / 1125 * 690rpx);
			background-color: #000;
			// background-image: url('../../static/icons/bg@3x.png');
			// background-repeat: no-repeat;
			// background-size: cover;
			overflow: hidden;
			border-radius: 20rpx;
			color: $uni-text-color-inverse;
			display: flex;
			flex-direction: column;
			justify-content: center;
			gap: 20rpx;
			padding: 0 30rpx;
			box-sizing: border-box;

			&--text {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				font-size: 32rpx;
				line-height: 48rpx;
				flex-grow: 1;
			}

			&--button {
				flex-shrink: 0;
				font-size: 22rpx;
				border: 1px solid #fff;
				border-radius: 6rpx;
				padding: 0 10rpx;
				height: 48rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: center;
				cursor: pointer;
			}

			&--row1 {
				width: 100%;
			}

			&--row2 {
				width: 100%;
			}

			&--row3 {
				width: 100%;
				display: flex;
				align-items: center;
				gap: 30rpx;
			}
		}
	}

	.zg__addButton {
		margin-top: 30rpx;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 10rpx;
		height: 100rpx;
		border-radius: 20rpx;
		cursor: pointer;

		&--icon {
			font-size: 40rpx;
		}

		&--text {}
	}

	.zg__footer {
		height: 300rpx;
	}
</style>